<template>
	<view class="viewbox auto p-top30">
		
		<view class="row j-sb a-center padding20-30 bg28 bor_radius_20 m-bot20">
			<view class="d-flex a-center">
				<view class="iconfont icon-touxiang white size42"></view>
				<text class="white size30 m-left20">头像</text>
			</view>
			<view class="d-flex a-center" @click="chooseImg">
				<image :src="userInfo.head_image" class="headImg"></image>
				<view class="iconfont icon-a-zujian32 color_ccc size16 m-left10"></view>
			</view>
		</view>
		
		<view class="row j-sb a-center padding30 bg28 bor_radius_20 m-bot20">
			<view class="d-flex a-center">
				<view class="iconfont icon-nicheng white size42"></view>
				<text class="white size30 m-left20">昵称</text>
			</view>
			<view class="d-flex a-center" @click="showModel">
				<text class="white size30">{{userInfo.nick_name}}</text>
				<view class="iconfont icon-a-zujian32 color_ccc size16 m-left10"></view>
			</view>
		</view>
		
		<view class="row j-sb a-center padding30 bg28 bor_radius_20 m-bot20">
			<view class="d-flex a-center">
				<view class="iconfont icon-shoujihaoma white size42"></view>
				<text class="white size30 m-left20">手机号</text>
			</view>
			<view class="d-flex a-center">
				<text class="white size30">{{userInfo.phone}}</text>
			</view>
		</view>
		
		<view class="row j-sb a-center padding30 bg28 bor_radius_20 m-bot20" @tap="go('authentication')">
			<view class="d-flex a-center">
				<view class="iconfont icon-wode-shimingrenzheng white size42"></view>
				<text class="white size30 m-left20">实名认证</text>
			</view>
			<view class="d-flex a-center">
				<text class="color_ccc size28">{{realname.card?'已认证':'未认证'}}</text>
				<view class="iconfont icon-a-zujian32 color_ccc size16 m-left10"></view>
			</view>
			
		</view>
		
		<view class="row j-sb a-center padding30 bg28 bor_radius_20 m-bot20" @tap="go('SetPayPsd')">
			<view class="d-flex a-center">
				<view class="iconfont icon-xiugaimima white size42"></view>
				<text class="white size30 m-left20">操作密码</text>
			</view>
			<view class="iconfont icon-a-zujian32 color_ccc size16"></view>
		</view>
		
		<view class="row j-sb a-center padding30 bg28 bor_radius_20 m-bot20" @tap="go('SetLoginPsd')">
			<view class="d-flex a-center">
				<view class="iconfont icon-xiugaimima white size42"></view>
				<text class="white size30 m-left20">修改登录密码</text>
			</view>
			<view class="iconfont icon-a-zujian32 color_ccc size16"></view>
		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex';
	export default {
		data() {
			return {
				userInfo:'',
				showSrc:'',
			}
		},
		onShow() {
			this.getMemInfo();
		},
		methods: {
			getMemInfo() {
				this.$http.get('user/userInfo').then(res => {
					if (res.code == 1) {
						this.userInfo = res.data;
						this.showSrc = res.data.head_image;
					}
				})
			},
			
			chooseImg(){
				let that = this;
				uni.chooseImage({
					count:1,
					success(res) {
						let tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: that.baseUrl + 'upload/fileUpload',
							filePath: tempFilePaths[0],
							name: 'image',
							header: {
								'token': uni.getStorageSync("token")
							},
							success: (res1) => {
								var result = JSON.parse(res1.data);
								if (result.code == 1) {
									that.showSrc = result.data.path;
									that.editInfo()
								} else {
									that.toast('上传失败');
								}
							}
						});
					}
				})
			},
			
			editInfo() {
				let data = {
					nick_name: this.userInfo.nick_name,
					head_image: this.showSrc
				}
				this.$http.post('user/editUserInfo', data).then(res => {
					if (res.code == 1) {
						this.toast(res.msg);
						this.getMemInfo();
					} else {
						this.toast(res.msg);
					}
				})
			},
			
			
			showModel(){
				let that = this;
				uni.showModal({
					title:'修改昵称',
					showCancel:true,
					editable:true,
					placeholderText:that.userInfo.nick_name,
					success(res) {
						if(res.cancel) return;
						that.userInfo.nick_name = res.content;
						that.editInfo();
					}
				})
			}
			
		},
		computed:{
			...mapState(['realname'])
		}
	}
</script>
<style>
	page {
		background-color: #1e201f;
	}
</style>
<style lang="scss" scoped>
	.headImg{
		width:60rpx;
		height: 60rpx;
		border-radius: 50%;
	}
</style>
